<template>
    <el-card class="box-card">
        <div>
            <el-row>
                <el-col :span="24">
                    <el-row>
                        <el-col :span="3">
                            <el-input class="ll" v-model="standarName" placeholder="请输入标准名称"></el-input>
                        </el-col>
                        <el-col :span="5">
                            <el-select class="expertsearch" v-model="standardselectionID" placeholder="请选择评审类别">
                                <el-option v-for="(item, index) in Searchoptions" :key="index" :label="item.dselectionName"
                                    :value="item.standardselectionID">
                                </el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="10">&nbsp;</el-col>
                        <el-col :span="6">
                            <el-button class="ll" style="text-align: right;" type="primary" @click="show()">查询</el-button>
                            <el-button class="ll" style="text-align: right;" @click="postgo()" type="primary">添加</el-button>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>
            <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%;margin-top: 10px;"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column label="序号" prop="standarID">
                </el-table-column>
                <el-table-column prop="standarName" label="标准名">
                </el-table-column>
                <el-table-column prop="remark" label="描述">
                </el-table-column>
                <el-table-column prop="scoreType" label="评判类别">
                    <template #default="scope">
                        <span style="color:green" v-if="scope.row.scoreType == 0">分数</span>
                        <span style="color:red" v-if="scope.row.scoreType == 1">等级</span>
                    </template>
                </el-table-column>
                <el-table-column label="选项内容" prop="dselectionName">
                </el-table-column>
                <!-- <el-table-column prop="totalPoints" label="分数">
                </el-table-column> -->
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-link size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-link>
                        &nbsp;
                        <el-link size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-link>
                    </template>
                </el-table-column>
            </el-table>
            <el-dialog title="添加" v-model="dialogPostVisible">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="标准名" prop="standarName">
                        <el-input v-model="ruleForm.standarName"></el-input>
                    </el-form-item>
                    <el-form-item label="描述" prop="remark">
                        <el-input v-model="ruleForm.remark"></el-input>
                    </el-form-item>
                    <el-form-item label="评判类别" prop="scoreType">
                        <el-radio v-model="ruleForms.scoreType" :label=0>分数</el-radio>
                        <el-radio v-model="ruleForms.scoreType" :label=1>等级</el-radio>
                    </el-form-item>
                    <el-form-item label="所属标准" prop="standardselectionID">
                        <el-select v-model="ruleForm.standardselectionID" placeholder="请选择">
                            <el-option v-for="(item, index) in Searchoptions" :key="index" :label="item.dselectionName"
                                :value="item.standardselectionID">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <!-- <el-form-item label="分数" prop="totalPoints">
                        <el-input v-model="ruleForm.totalPoints"></el-input>
                    </el-form-item> -->
                    <el-form-item>
                        <el-button type="primary" @click="add('ruleForm')">立即创建</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
            <el-dialog title="修改" v-model="dialogPutVisible">
                <el-form :model="ruleForms" :rules="rules" ref="ruleForms" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="标准名" prop="standarName">
                        <el-input v-model="ruleForms.standarName"></el-input>
                    </el-form-item>
                    <el-form-item label="描述" prop="remark">
                        <el-input v-model="ruleForms.remark"></el-input>
                    </el-form-item>
                    <el-form-item label="评判类别" prop="scoreType">
                        <el-radio v-model="ruleForms.scoreType" :label=0>分数</el-radio>
                        <el-radio v-model="ruleForms.scoreType" :label=1>等级</el-radio>
                    </el-form-item>
                    <el-form-item label="所属标准" prop="standardselectionID">
                        <el-select v-model="ruleForms.standardselectionID" placeholder="请选择">
                            <el-option v-for="(item, index) in Searchoptions" :key="index" :label="item.dselectionName"
                                :value="item.standardselectionID">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="分数" prop="totalPoints">
                        <el-input v-model="ruleForms.totalPoints"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="update('ruleForms')">立即创建</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
        </div>
    </el-card>
</template>
<script>
export default {
    data() {
        return {
            tableData: [],
            ruleForm: {
                standardselectionID: "",
                standarName: "",
                remark: "",
                scoreType: 0,
                /* dselectionName: "",
                totalPoints: "", */
                creator: "",
                modifier: "",
                createDate: new Date(),//创建时间
                modifierTime: new Date(),//修改时间
                isDelete: 0,

            },
            ruleForms: {
                standarID: '',
                standardselectionID: "",
                standarName: "",
                remark: "",
                scoreType: 0,
                creator: "",
                modifier: "",
                createDate: new Date(),//创建时间
                modifierTime: new Date(),//修改时间
                isDelete: 0,
            },
            multipleSelection: [],
            rules: {
                standarName: [
                    { required: true, message: '请输入标准名称', trigger: 'blur' },
                ],
                remark: [
                    { required: true, message: '请输入描述', trigger: 'change' }
                ],
                scoreType: [
                    { required: true, message: '请输入评判类别', trigger: 'change' }
                ],
                totalPoints: [
                    { required: true, message: '请输入分数', trigger: 'change' }
                ],
                dselectionName: [
                    { required: true, message: '请输入选项内容', trigger: 'change' }
                ],
            },
            formLabelWidth: '120px',
            dialogPostVisible: false,
            dialogPutVisible: false,
            paneloptions: [],
            standarName: '',
            standardselectionID: "",
            Searchoptions: [],
        }
    },
    created() {
        this.show()
        this.Searchselect()
    },
    methods: {
        toggleSelection(rows) {
            if (rows) {
                rows.forEach(row => {
                    this.$refs.multipleTable.toggleRowSelection(row);
                });
            } else {
                this.$refs.multipleTable.clearSelection();
            }
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        postgo() {
            this.dialogPostVisible = true;
        },
        //删除
        handleDelete(index, row) {
            this.$confirm("确认删除吗？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                var ids = [];
                ids.push(row.standarID);
                this.http.post("api/tb_project_reviewstandar/delete?id=" + ids).then((res) => {
                    if (res.status) {
                        this.show();
                        this.$message({
                            type: "success",
                            message: res.message,
                        });
                    } else {
                        this.$message({
                            type: "error",
                            message: res.message,
                        });
                    }
                });
            }).catch(() => {
                this.$message({
                    type: "info",
                    message: "已取消",
                });
                this.Isdisable = true;
            });
        },
        //添加
        add(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.http.post('/api/tb_project_reviewstandar/insert', this.ruleForm).then((res) => {
                        if (res.status) {
                            console.log(res),
                                this.$message({
                                    type: "success",
                                    message: res.message,
                                });
                            this.show();
                            this.dialogPostVisible = false;
                        } else {
                            this.$message("保存失败");
                        }
                    })

                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        //显示
        show() {
            //使用构造的URL将HTTP GET请求发送到服务器。
            let url = "api/tb_project_reviewstandar/list?standarName=" + this.standarName + "&standardselectionID=" + this.standardselectionID;
            this.http.get(url, {}, true).then((res) => {
                console.log(res)
                //接收到响应后，将数据记录到控制台并分配给tableData属性，该属性用于显示表中的信息。
                this.tableData = res.data;
            });
        },
        handleEdit(index, row) {
            localStorage.id = row.standarID
            this.dialogPutVisible = true
            //console.log(row.standarID)
            this.GetDetail()
        },
        //查询的下拉显示 Searchoptions
        Searchselect() {
            let url = "api/tb_project_reviewstandar_item/SelectList";
            this.http.get(url, {}, true).then((res => {
                this.Searchoptions = res.data
            }))
        },
        //反填
        GetDetail() {
            let ids = localStorage.id
            console.log(ids)
            let url = "api/tb_project_reviewstandar/details?id=" + ids;
            this.http.post(url, {}, true).then((res) => {
                //console.log(res.data[0])
                this.ruleForms.standarName = res.data[0].x.standarName
                this.ruleForms.remark = res.data[0].x.remark
                this.ruleForms.standardselectionID = res.data[0].y.standardselectionID
                this.ruleForms.scoreType = res.data[0].x.scoreType
                this.ruleForms.totalPoints = res.data[0].y.totalPoints
            })
        },
        //修改
        update(formName) {
            this.ruleForms.standarID = localStorage.id
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.http.post('api/tb_project_reviewstandar/UpdateInsertReviewstandar', this.ruleForms).then((res) => {
                        if (res.status) {
                            console.log(res),
                                this.$message({
                                    type: "success",
                                    message: res.message,
                                });
                            this.show();
                            this.dialogPutVisible = false;
                        } else {
                            this.$message("保存失败");
                        }
                    })

                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },

    }
}
</script>
  
<style>
.expertsearch {
    margin-top: 5px;
    margin-left: 10px;
}
</style>